<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
			<el-card shadow="hover" class="pageQueryBoxArea mb10">
				<el-form :model="state.param" :inline="true">
					<el-form-item label="门店类型：">
						<el-select v-model="state.param.source" placeholder="请选择门店类型">
							<el-option v-for="item in state.query.storeType" :key="item.value"
								:label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="门店状态：">
						<el-select v-model="state.param.storeStatus" placeholder="请选择门店状态">
							<el-option v-for="item in state.query.storeStatus" :key="item.value"
								:label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
				
					<el-form-item label="选择门店：">
						<el-select v-model="state.param.nodeId" multiple collapse-tags placeholder="请选择门店">
							<el-option v-for="item in state.query.storeList" :key="item.id"
								:label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
				
					<el-form-item label="卡项属性：">
						<el-select v-model="state.param.status" placeholder="请选择卡项属性">
							<el-option v-for="item in state.query.cardType" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="剩余次数：">
						<el-input v-model="state.param.keyword" placeholder="剩余次数">
							<template #prepend>
								<el-select v-model="state.param.nodeId"  placeholder="请选择卡项属性">
									<el-option v-for="item in state.query.residueCount" :key="item.value" :label="item.label"
									:value="item.value" />
								</el-select>
							</template>
						</el-input>
					</el-form-item>
				
					<el-form-item label="到期时间：">
						<el-input v-model="state.param.keyword" placeholder="到期时间（天）">
							<template #prepend>
								<el-select v-model="state.param.nodeId"  placeholder="请选择">
									<el-option v-for="item in state.query.residueCount" :key="item.value" :label="item.label"
									:value="item.value" />
								</el-select>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item label="搜索：">
						<el-input v-model="state.param.keyword" placeholder="请输入搜索关键字" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Search />
							</el-icon> 搜 索
						</el-button>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Refresh />
							</el-icon> 重 置
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card shadow="hover" v-loading="state.loading" style="display: flex;flex-direction: column;flex: 1;height: inherit;">
				<section style="flex: 1;display: flex;flex-direction: column; flex: 1;height: inherit;">
					<el-table :data="state.tableData" v-loading="state.loading">
						<el-table-column label="姓名/昵称" prop="name" />
						<el-table-column sortable label="电话号码">
							<template #default="scope">
								<span>139****8888</span>
							</template>
						</el-table-column>
						<el-table-column label="名称" prop="cardName" />
						<el-table-column label="属性" prop="property" />
						<el-table-column label="规格" prop="spec" />
						<el-table-column label="购买数量" sortable prop="cardCount" />
						<el-table-column label="应付金额" sortable prop="orderPrice" />
						<el-table-column label="实付金额" sortable prop="paymentPrice" />
						<el-table-column label="欠款金额" sortable prop="debtPrice" />
						<el-table-column label="剩余时间/次数" sortable prop="cardTotal" />
						<el-table-column label="最近到店" sortable prop="lastTime" />
						<el-table-column  label="操作">
							<template #default="scope">
								<el-button text type="primary">
									详情
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-row justify="end">
						<el-col :span="24" class="flex-end-center">
							<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange"
								class="mt15" :pager-count="5" :page-sizes="[10, 20, 30,50,100,500,1000]"
								v-model:current-page="state.param.pageNum" background v-model:page-size="state.param.pageSize"
								layout="total, sizes, prev, pager, next, jumper" :total="state.total">
							</el-pagination>
						</el-col>
					</el-row>
				</section>
			</el-card>
		</div>
	</div>
</template>

<script setup lang="ts" name="funCountup">
import {  onMounted, reactive, } from 'vue';
import { storeNodeList } from '/@/api/order';
const state = reactive({
	param: {
		type: 4,
		source: 0, // 0 门店 2 线上 //设置不了得值是哪个？
		mode: null, // 门店类型  null(默认) 全部 0 直营  1 加盟
		storeStatus:-1,
		nodeId: null, // 门店id
		// 销售渠道
		channel: null,
		status: null,
		// 支付方式
		dateTime: [],
		startTime: "",
		endTime: "",
		timeInterval: 3,
		total: 0,
		keyword: "",
		pageNum: 1,
		pageSize: 10,
		change: 999,
		storeType: null as null | number,
		statistics: 1,
		rowId: -1
	},
	query: {
		orderSource: [
			{ value: 0, label: '门店订单' },
		],
		storeType: [
			{ value: null, label: '全部' },
			{ value: 0, label: '直营' },
			{ value: 1, label: '加盟' }
		],
		storeStatus:[
			{ value: -1, label: '全部' },
			{ value: 1, label: '正常' },
			{ value: 2, label: '闭店' },
			{ value: 3, label: '休息' }
		],
		residueCount:[
			{ value: 1, label: '小于' },
			{ value: 2, label: '等于' },
			{ value: 3, label: '大于' }
		],
		staticticsCategory: [
			{ value: 1, label: '卡项销售' },
			{ value: 2, label: '卡项普及' },
			{ value: 3, label: '卡项消耗' },
			{ value: 4, label: '大数据画像' },
		],
		cardType: [
			{ value: null, label: '全部' },
			{ value: 0, label: '计时' },
			{ value: 1, label: '计次' },
			{ value: 2, label: '计时计次' },
		],
		storeList: [] as Array<any>,
		orderStatus: [
			{ value: null, label: '全部' },
			{ value: 4, label: '已服务' },
			{ value: 14, label: '已撤销' },
		],
		saleChannel: [] as Array<any>,
		orderType:[
			{ value: 999, label: '全部订单' },
			{ value: 1, label: '换卡服务' },
			{ value: 2, label: '余卡服务' },
		]
	},
	loading: false,
	total: 0,
	tableData: [
		{
			id: 1,
			name: '测试',
			phone: '15578968752',
			property: '属性名称',
			spec: '规格',
			cardName: '卡项名称',
			cardCount: '2',
			orderPrice: 2356,
			paymentPrice: 354,
			debtPrice: 2315,
			cardTotal: 5520,
			useCount: 23,
			residueTotal: 564,
			becomeDueTime: '2023-12-08 15:33:45',
			lastTime: '2023-12-08 15:33:45',
			notActiveCount: 786
		}
	] as Array<any>
		
});


const search = () => {}

const onHandleSizeChange = () => {}
const onHandleCurrentChange = () => {}

/**
 * 获取门店列表
 * mode  null /全部   0直营  1加盟
 */
 const getStoreNodeList = async () => {
	const { results } = await storeNodeList({ mode: null, current: 1, size: 50 });
	let no1 = [{id:null,name:'全部'}]
	state.query.storeList = [...no1, ...results.records];
}


// 页面加载时
onMounted(() => {
	getStoreNodeList()
});
</script>

<style scoped lang="scss">
:deep(.el-card__body){
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-table{
		flex: 1;
		.el-table__inner-wrapper::before{
			background: none !important;
		}
	}
}

</style>
